<!--
 * @Author: Li Zengkun
 * @Date: 2022-06-29 10:19:38
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-01 20:17:42
 * @Description: 特色酒店
-->
<!--  -->
<template>
  <div id="productPage">
    <!-- 主题图片 -->
    <div id="banner" class="invisable wow"></div>
    <!-- 导航标签 -->
    <div class="target_content">
      <div class="main-content">
        您的位置:

        <router-link to="/" class="target">首页</router-link>
        <i class="fa fa-angle-right"></i>
        <router-link to="/hotel" class="target" style="color: #0072d4"
          >特色酒店</router-link
        >
      </div>
    </div>

    <!-- 特色酒店 -->
    <div class="product-button main-content title_button invisable wow" ref="hotelTags">
      <a @click="choseTag(0)" class="active"><span>全部</span></a>
      <a @click="choseTag(1)" class=""><span>海外酒店</span></a>
      <a @click="choseTag(2)" class=""><span>国内酒店</span></a>
    </div>

    <div class="hotel_box" style="background: #fff" id="hotel">
      <div class="main-content">
        <ul class="flex_ul" id="hotel_ul">
          <li
            class="box_shadow invisible wow"
            :style="{ animationDelay: index * 0.2 + 's' }"
            v-for="(item, index) in showHotels"
            :key="item"
          >
            <div class="img_box">
              <img :src="item.img" alt="" />
            </div>
            <div class="item_wrapper">
              <div class="item_info">
                <a class="item_title" :href="'#detail?type=hotel&id=' + item.id" target="_blank">{{ item.title }}</a>
                <p class="subtitle">
                  {{ item.subtitle }}
                </p>
              </div>
              <a  :href="'#detail?type=hotel&id=' + item.id" target="_blank" class="more2">
                <span> MORE </span>
                <i></i>
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 分页 -->
    <div class="main-content" style="height: auto">
      <div class="pages">
        <a class="prev" @click="prev()">
          <i class="fa fa-angle-left"></i>
        </a>
        <a
          v-for="item in pages"
          :key="item"
          :class="item == 1 ? 'page_active page_item' : 'page_item'"
          @click="jumpBtn(item - 1)"
        >
          {{ item }}
        </a>
        <a class="next" @click="next()">
          <i class="fa fa-angle-right"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotels: [],
      targetHotels: [],
      showHotels: [],
      pages: 1,
      selectPage: 0,
    };
  },
  components: {},
  beforeCreate() {
    // 数据初始化
  },
  // 初始化
  mounted() {
    document.getElementsByTagName('title')[0].innerHTML = '云旅 | 特色酒店'

    this.$axios.get("/data.json").then((res) => {
      this.hotels = res.data.hotels;

      this.targetHotels = this.hotels;
      this.pages = Math.ceil(this.targetHotels.length / 4);
      this.showHotels = this.targetHotels.slice(0, 4);
    });
  },
  methods: {
    // 分类操作
    choseTag(index) {
      if (index < 0 || index > 2) return;
      if (index === 0) {
        this.targetHotels = this.hotels;
      } else {
        this.targetHotels = this.hotels.filter((item) => {
          return item.type === (index === 1 ? "海外酒店" : "国内酒店");
        });
      }
      this.pages = Math.ceil(this.targetHotels.length / 4);
      this.showHotels = this.targetHotels.slice(0, 4);
      this.clearTagActive();
      this.addTagActive(index);
    },
    clearTagActive() {
      document.getElementsByClassName("active")[0].classList.remove("active");
    },
    addTagActive(index) {
      this.$refs.hotelTags.childNodes[index].classList.add("active");
    },

    // 分页操作
    prev() {
      if (this.selectPage <= 0) return;

      this.selectPage--;
      this.jumpBtn(this.selectPage);
    },
    next() {
      if (this.selectPage >= this.pages - 1) return;

      this.selectPage++;
      this.jumpBtn(this.selectPage);
    },
    // 跳转
    jumpBtn(index) {
      this.clearActive();
      let startIndex = index * 4;
      this.showHotels = this.targetHotels.slice(startIndex, startIndex + 4);
      document.getElementsByClassName("page_item")[index].classList.add("page_active");
    },
    // 清除选中
    clearActive() {
      document.getElementsByClassName("page_active")[0].classList.remove("page_active");
    },
  },
};
</script>

<style scoped>
@import "../assets/css/indexPage.css";

#productPage {
  height: auto;
  width: 100%;
  background-color: #fff;
}
#productPage #banner {
  height: 400px;
  background-image: url("../assets/main_img2.jpg");
  background-position: center;
}
#productPage .product-button {
  width: 100%;
  text-align: left;
}
.hotel_box {
  margin-top: 0;
}
#hotel_ul {
  justify-content: left;
}
</style>
